<style type="text/css">
    .zhekou{
        display: inline-block;
        background: #d80808;
        color: #ffffff;
        padding: 0 6px;
    }
    .memoZhi{
        /*position: absolute;*/
        /*background: #0a8ddf;*/
        /*z-index: 10000000000;*/
    }
    .memoZhi .memo{
        padding: 2px 0 2px 4px;
        margin: 5px 0;
        border: #ccc 1px solid;
        width: 600px;
    }
    .table-madan tr td{background-color: #ffffff;}
    .pihao th{background-color: #ffffff;border-bottom: 2px solid #efefef;}
    .pihao th span{padding: 5px 10px 4px 10px; background-color: #efefef;width: 180px; overflow: visible;font-weight: bold;display:inline-block;font-size: 14px;}
    .product-buy-quantity{*zoom:1;display: list-item;margin-bottom: .0em;text-align: -webkit-match-parent;list-style: none;}
</style>
<div class="change-payment" >
    <div style="overflow:auto;height:460px;width:100%;" id="zidong">
        <table class="table-madan">
            <tbody>
            <{if $rolls|count gt 0}>
            <{foreach from=$rolls item=item key=key}>
            <input type = "hidden" id = "productId" value = "<{$item[0][0]['productId']}>" name = "productId">
                <tr class="pihao">
                  <th colspan=3>
                    <span><{t}>批号<{/t}>：<{$item.num}>&nbsp;&nbsp;<{t}>备注<{/t}>：<{$item.0.0.memo2}></span>
                    </th>
                </tr>

                    <{foreach from=$item item=_item key=aaa}>
                         <tr>
                            <{foreach from=$_item item=it}>
                            <{if $it['id'] > 0}>
                                <td>
                                    <input type="checkbox" name="chkRoll[]" value='<{$it['id']}>' cnt='<{$it['cntMi']}>' id="chkRoll[<{$it['id']}>]" class="chkRoll"  pihao="<{$item.num}>">
                                    <label for="chkRoll[<{$it['id']}>]" ><{$it['rollNo']}>#-<{$it['cnt']}><{$it['unit']}>  <{if $it['zhe'] }>  <span class="zhekou" onmouseover="show_memoZhi(this,'<{$it['memoZhi']}>')" onmouseout="hide_memoZhi(this);" ><{ $it['zhe'] }>折</span>  <{/if}>
                                    </label>
                                </td>
                            <{/if}>
                            <{/foreach}>
                        </tr>
                        <tr style="display: none;" class="show_memo">
                            <td colspan="3">
                               <div class="memoZhi">
                                   <span>折扣说明:</span>
                                   <div class="memo">设置图像的  亲自试一试浏览器支持 所有主流浏览器都支持 z-index 属性</div>
                               </div>
                            </td>
                        </tr>
                    <{/foreach}>
            <{/foreach}>
            <{else}>
                <tr >
                  <th colspan=3>
                    <label><b style='font-size:15px;'><{t}>未发现码单信息！请重新选择<{/t}></b></label>
                    </th>
                </tr>
            <{/if}>
            </tbody>
        </table>
    </div>
    <table>
        <tfoot>
            <tr>
                <th colspan="2">
                <li class = 'product-buy-quantity'><span class = "item-content"><{t}>数量<{/t}>(M)：<span class = "p-quantity-ph"><input type = 'text' id = 'cntM'><a href="javascript:autoPeihuo();" class="btn-peihuo"><{t}>自动配货<{/t}></a></span>
                </span></li>
                </th>
            </tr>
            <tr>
                <th colspan="2">
                <button type="button" class="btn btn-caution btnSure"><span><span><{t}>确认配货<{/t}></span></span></button>
                <span class="label" id='divTotal'></span>
                </th>
            </tr>
        </tfoot>
    </table>

</div>
<script type="text/javascript">
    jq(function() {
        jq("#zidong").scrollTop(jq("#zidong")[0].scrollHeight);
    })
    //每次选中，会重新计算总卷数和总米数
    //1Y = 0.9144M,ec端只考虑米数
    $$('.chkRoll').addEvent('click',function(e){
        var sign = 0;
        var totalCnt=0;
        var cnt=0;
        var ids= [];
        var cntM = [];
        var inputs = document.getElementsByName('chkRoll[]');//获取所有的input标签对象。

        for(var i=0;i<inputs.length;i++){
            var obj = inputs[i];
            if(obj.type=='checkbox'){
                if(obj.checked==true){
                    sign++;
                    id = obj.value;
                    cnt = parseFloat(obj.getAttribute("cnt"))||0;
                    totalCnt=parseFloat(totalCnt)+cnt;
                    totalCnt=totalCnt.toFixed(3);
                    cntM.push(cnt);
                    ids.push(id);
                }
            }
        }
        totalCnt=parseFloat(totalCnt).toFixed(2);
        //往选中之中填值
        //合计显示在页面上
        var totalStr="<b><{t}>选中<{/t}>:"+"<font color='red'>"+sign+"</font>&nbsp;&nbsp;<{t}>卷<{/t}>&nbsp;&nbsp;<{t}>共<{/t}>:"+"<font color='red'>"+totalCnt+"</font>&nbsp;&nbsp;M</b> <div type='hidden' id='total' value='"+totalCnt+"' cntJuan='"+sign+"' madan_ids='"+ids+"' cntM='"+cntM+"'></div> ";
        var spanDiv=window.document.getElementById ("divTotal");
        spanDiv.innerHTML = totalStr;
    });

    //2015-9-11 by jeff确认后,ajax访问后台，修改购物车数据后，动态改变当前页面的相关数据
    //包括数量和卷数
    $$('.btnSure').addEvent('click',function(e){
        var inputCnt = $$('[name="goods[num]"]');
        var inputIds = $$('[name="goods[madan_ids]"]');
        var inputJu = $$('[name="goods[juanshu]"]');
        var inputCntm = $$('[name="goods[cntM]"]');

        //2018-8-3 by jeff,选中的布卷如果存在多批,提醒
        var chks = $$('[name="chkRoll[]"]:checked');
        var arrPihao = [];
        var cntArr = 0;
        for (var i=0;chks[i];i++) {
            var kk = 'cc_'+chks[i].getAttribute("pihao");
            if(arrPihao[kk]) continue;
            arrPihao[kk] = 1;
            cntArr++;
        }
        if(cntArr>1) {
            alert('选择结果不是同一批号,可能存在色差，请优先选择同一批号!');
        }

        inputCnt.set('value',window.document.getElementById("total").getAttribute('value'));
        inputIds.set('value',window.document.getElementById("total").getAttribute('madan_ids'));
        inputJu.set('value',window.document.getElementById("total").getAttribute('cntJuan'));
        inputCntm.set('value',window.document.getElementById("total").getAttribute('cntM'));
        closeDiv();
        // alert('ajax访问后台，修改购物车数据后，刷新当前页面或者动态改变当前页面的某些区域的数据');

    });

    /**
     * ps ：自动配货
     * Time：2015/10/26 20:23:23
     * @author liuxin
     * @param 参数类型
     * @return 返回值类型
    */
    function autoPeihuo(){

        var inputs = document.getElementsByName('chkRoll[]');//获取所有的input标签对象。
        for(var i=0;i<inputs.length;i++){
        var obj = inputs[i];
            if(obj.type=='checkbox'){
                if(obj.checked==true){
                    obj.checked = false;
                }
            }
        }
        var id = document.getElementById("productId").value;
        var cntM = document.getElementById("cntM").value;
        if(isNaN(Number(cntM))||cntM == ''||cntM <= 0){
            document.getElementById("cntM").value = "0";
            var totalStr="<b><{t}>选中<{/t}>:"+"<font color='red'>"+"0"+"</font>&nbsp;&nbsp;<{t}>卷<{/t}>&nbsp;&nbsp;<{t}>共<{/t}>:"+"<font color='red'>"+"0"+"</font>&nbsp;&nbsp;M</b> <div type='hidden' id='total' value='"+"0"+"' cntJuan='"+"0"+"' madan_ids='"+""+"'></div> ";
            var spanDiv=window.document.getElementById ("divTotal");
            spanDiv.innerHTML = totalStr;
            return;
        }
        var url = "<{link app=b2c ctl=site_order act=autoPeihuo}>";
        new Request({
            method: 'post',
            url:url,
            data:{'product_id':id,'cntM':cntM},
            onSuccess:function(rs){
                try{
                    rs = JSON.decode(rs);
                    if(rs.error) {
                        return Message.error(rs.error);
                    }
                }catch(e) {
                    updateBasic(rs, id, url,atext);
                }
                if(rs.data.length==0){
                    alert("<{t}>配货失败,请检查填入数量是否正确！<{/t}>");
                    return;
                }

                for(var i=0;i<rs.data.length;i++){
                    $$("[id='chkRoll["+rs.data[i]+"]']").set('checked','checked');
                }

                var sign = 0;
                var totalCnt=0;
                var cnt=0;
                var ids= [];
                var cntM = [];
                for(var i=0;i<inputs.length;i++){
                var obj = inputs[i];
                    if(obj.type=='checkbox'){
                        if(obj.checked==true){
                            sign++;
                            id = obj.value;
                            cnt = parseFloat(obj.getAttribute("cnt"))||0;
                            totalCnt=parseFloat(totalCnt)+cnt;
                            totalCnt=totalCnt.toFixed(3);
                            ids.push(id);
                            cntM.push(cnt);
                        }
                    }
                }
                totalCnt=parseFloat(totalCnt).toFixed(2);
                // if(cntM>totalCnt){
                //     alert("输入数量大于库存，已为您选择最大库存数量！");
                // }
                document.getElementById("cntM").value = totalCnt;
                //往选中之中填值
                //合计显示在页面上
                var totalStr="<b><{t}>选中<{/t}>:"+"<font color='red'>"+sign+"</font>&nbsp;&nbsp;<{t}>卷<{/t}>&nbsp;&nbsp;<{t}>共<{/t}>:"+"<font color='red'>"+totalCnt+"</font>&nbsp;&nbsp;M</b> <div type='hidden' id='total' value='"+totalCnt+"' cntJuan='"+sign+"' madan_ids='"+ids+"' cntM='"+cntM+"'></div> ";
                var spanDiv=window.document.getElementById ("divTotal");
                spanDiv.innerHTML = totalStr;
            }
        }).post();
    }
    function show_memoZhi(obj,memoZhi) {
        var tr=obj.parentNode.parentNode.parentNode;
        var ns=tr.nextElementSibling;
        var memo=ns.getElementsByClassName('memo')[0];
        memo.innerHTML=memoZhi;
        ns.removeAttribute("style");
    }
    function hide_memoZhi(obj) {
        var tr=obj.parentNode.parentNode.parentNode;
        var ns=tr.nextElementSibling;
        ns.style.display='none';
    }

</script>
